<template>
  <div class="cluster-container">
    <span class="cluster-title"> 聚合效果</span>
    <div class="cluster-btns">
      <el-button type="primary" @click="EntityClusterOnScene">Entity聚合</el-button>
      <el-button type="primary" @click="PrimitiveClusterOnScene">Primitive聚合</el-button>

    </div>
  </div>
</template>
<script lang="ts" setup>
import EntityCluster, { ClusterPoint } from '@/system/VectorEffect/EntityCluster';

import PrimitiveCluster2 from '@/system/VectorEffect/PrimitiveCluster';
import CesiumViewer from '@/Viewer/CesiumViewer';


let viewer = CesiumViewer.viewer


const EntityClusterOnScene = () => {

  const cluster = new EntityCluster(viewer!)
  const pts: ClusterPoint[] = Array.from({ length: 1000 }, (_, i) => ({
    id: `p-${i}`,
    position: [
      110.0 + Math.random() * 4,
      22.0 + Math.random() * 4,
      0,
    ],
  }))
  cluster.AddPoints(pts)

}

const PrimitiveClusterOnScene = async () => {
 
  const pts: ClusterPoint[] = Array.from({ length: 5000 }, (_, i) => ({
    id: `p-${i}`,
    position: [
      113.0 + Math.random() * 4,
      22.0 + Math.random() * 4,
      0,
    ],
  }))

  const cluster = new PrimitiveCluster2(viewer!)
  cluster.AddPoints(pts)

}

onBeforeUnmount(() => {
  viewer?.entities.removeAll()
  viewer?.scene.primitives.removeAll()
})







</script>
<style lang="scss" scoped>
.cluster-container {
  padding: 10px;
  text-align: left;

  .cluster-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;

  }

  .cluster-btns {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 16px 24px;

  }
}
</style>